/**
 * Tabs 组件的主题配置
 * 
 * 基于企业级设计规范 (Tabs.json) 的完整配置
 * 包含所有标签页变体的样式定义
 */

import type { ComponentToken } from 'antd/es/tabs/style';

// ========== 设计 Token 常量 ==========

/**
 * 字体相关 Token
 */
const FONT_TOKENS = {
  // 字体大小
  fontSize: {
    small: 14,
    default: 14,
    large: 16,
  },
} as const;

/**
 * 颜色相关 Token
 */
const COLOR_TOKENS = {
  // 基础颜色
  inkBar: '#1890ff',          // 指示条颜色
  item: '#1a1a1a',            // 标签颜色
  itemActive: '#0d6edc',      // 激活颜色
  itemHover: '#40a9ff',       // 悬浮颜色
  itemSelected: '#1890ff',    // 选中颜色
  itemDisabled: '#c0c0c0',    // 禁用颜色
  
  // 卡片样式
  cardBg: '#fafafa',          // 卡片背景色
  
  // 边框颜色
  border: '#d9d9d9',          // 边框颜色
  borderHover: '#40a9ff',     // 悬浮边框颜色
  borderActive: '#1890ff',    // 激活边框颜色
  
  // 背景颜色
  bgHover: '#f0f0f0',         // 悬浮背景色
  bgDisabled: '#f5f5f5',      // 禁用背景色
  bgTransparent: 'transparent', // 透明背景
  
  // 文字颜色
  textLight: '#ffffff',       // 浅色文字（用于深色背景）
  
  // 填充样式（胶囊）
  fillBg: '#f0f0f0',          // 填充背景色
  fillActiveBg: '#ffffff',    // 填充激活背景色
} as const;

/**
 * 间距相关 Token
 */
const SPACING_TOKENS = {
  // 横向布局
  horizontalMargin: '0 0 16px 0',
  horizontalItemGutter: 32,
  horizontalItemPadding: '8px 0',
  horizontalItemPaddingLG: '16px 0',
  horizontalItemPaddingSM: '4px 0',
  
  // 纵向布局
  verticalItemPadding: '4px 24px',
  verticalItemMargin: '16px 0 0 0',
  
  // 卡片样式
  cardPadding: '6px 16px',
  cardPaddingSM: '4px 12px',
  cardPaddingLG: '10px 16px',
  cardGutter: 2,
} as const;

/**
 * 尺寸相关 Token
 */
const SIZE_TOKENS = {
  // 卡片高度
  cardHeight: 40,
  cardHeightSM: 32,
  cardHeightLG: 48,
  
  // 圆角
  borderRadius: 8,
  borderRadiusLG: 12,
  borderRadiusSM: 4,
} as const;

/**
 * 层级相关 Token
 */
const ZINDEX_TOKENS = {
  popup: 1050,
} as const;

/**
 * Tabs 完整主题配置
 * 
 * 根据设计规范文件 Tabs.json 定义的企业级标签页样式
 * 涵盖所有标签页类型、状态和尺寸的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Tabs: tabsThemeConfig } }}>
 *   <Tabs items={items} />
 *   <Tabs type="card" items={items} />
 *   <Tabs type="editable-card" items={items} />
 * </ConfigProvider>
 * ```
 */
export const tabsThemeConfig: Partial<ComponentToken> = {
  // ========== 字体配置 ==========
  titleFontSize: FONT_TOKENS.fontSize.default,
  titleFontSizeLG: FONT_TOKENS.fontSize.large,
  titleFontSizeSM: FONT_TOKENS.fontSize.small,
  
  // ========== 颜色配置 ==========
  inkBarColor: COLOR_TOKENS.inkBar,
  itemColor: COLOR_TOKENS.item,
  itemHoverColor: COLOR_TOKENS.itemHover,
  itemSelectedColor: COLOR_TOKENS.itemSelected,
  itemActiveColor: COLOR_TOKENS.itemActive,
  
  // ========== 卡片样式配置 ==========
  cardBg: COLOR_TOKENS.cardBg,
  cardHeight: SIZE_TOKENS.cardHeight,
  cardPadding: SPACING_TOKENS.cardPadding,
  cardPaddingSM: SPACING_TOKENS.cardPaddingSM,
  cardPaddingLG: SPACING_TOKENS.cardPaddingLG,
  cardGutter: SPACING_TOKENS.cardGutter,
  
  // ========== 间距配置 ==========
  horizontalMargin: SPACING_TOKENS.horizontalMargin,
  horizontalItemGutter: SPACING_TOKENS.horizontalItemGutter,
  horizontalItemPadding: SPACING_TOKENS.horizontalItemPadding,
  horizontalItemPaddingSM: SPACING_TOKENS.horizontalItemPaddingSM,
  horizontalItemPaddingLG: SPACING_TOKENS.horizontalItemPaddingLG,
  
  verticalItemPadding: SPACING_TOKENS.verticalItemPadding,
  verticalItemMargin: SPACING_TOKENS.verticalItemMargin,
  
  // ========== 层级配置 ==========
  zIndexPopup: ZINDEX_TOKENS.popup,
};

/**
 * 获取 Tabs 主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myTabsTheme = getTabsTheme({
 *   inkBarColor: '#ff6b35',              // 自定义指示条颜色
 *   itemSelectedColor: '#ff6b35',        // 自定义选中颜色
 *   horizontalItemGutter: 48,            // 自定义标签间距
 * });
 * 
 * <ConfigProvider theme={{ components: { Tabs: myTabsTheme } }}>
 *   <Tabs items={items} />
 * </ConfigProvider>
 * ```
 */
export const getTabsTheme = (
  customConfig?: Partial<ComponentToken>
): Partial<ComponentToken> => {
  return {
    ...tabsThemeConfig,
    ...customConfig,
  };
};

/**
 * 样式增强专用的额外 Token
 * 
 * 这些 Token 不在 antd 的 ComponentToken 中，
 * 专门用于 useTabsStyles 中的自定义样式
 */
export const tabsStyleTokens = {
  // 颜色
  colorBorder: COLOR_TOKENS.border,
  colorBorderHover: COLOR_TOKENS.borderHover,
  colorBorderActive: COLOR_TOKENS.borderActive,
  colorBgHover: COLOR_TOKENS.bgHover,
  colorBgDisabled: COLOR_TOKENS.bgDisabled,
  colorBgTransparent: COLOR_TOKENS.bgTransparent,
  colorTextLight: COLOR_TOKENS.textLight,
  colorTextDisabled: COLOR_TOKENS.itemDisabled,
  colorFillBg: COLOR_TOKENS.fillBg,
  colorFillActiveBg: COLOR_TOKENS.fillActiveBg,
  
  // 从 tabsThemeConfig 中复用的颜色（方便统一访问）
  colorItemHover: COLOR_TOKENS.itemHover,
  colorItemSelected: COLOR_TOKENS.itemSelected,
  colorCardBg: COLOR_TOKENS.cardBg,
  
  // 尺寸
  borderRadius: SIZE_TOKENS.borderRadius,
  borderRadiusLG: SIZE_TOKENS.borderRadiusLG,
  borderRadiusSM: SIZE_TOKENS.borderRadiusSM,
} as const;

/**
 * 导出 Tabs 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as TabsComponentToken } from 'antd/es/tabs/style';
